<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" class="autoinsert" src="../js/jquery-2.2.0.min.js"></script>
		<script type="text/javascript" class="autoinsert" src="../js/layer.js"></script>
		<script type="text/javascript" charset="UTF-8" src="../js/admin_login.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/admin_login.css" />
		<link rel="stylesheet" type="text/css" href="../css/layer.css" />
		<title>后台登录</title>
		<link rel="shortcut icon" href="../img/icon.jpg">
	</head>
	<body>

		<div class="login-container full-height">

			<!-- 动态云层动画 开始 -->
			<div class="clouds-container">
				<div class="clouds clouds-footer"></div>
				<div class="clouds"></div>
				<div class="clouds clouds-fast"></div>
			</div>
			<!-- 动态云层动画 结束 -->

			<!-- 顶部导航条 开始 -->
			<div class="header">
				<span class="title notselect">
					欢迎登录 浓雾监测系统 后台管理 <sup>1.0.0</sup>
				</span>
				<ul>
					<!--<li class="notselect"><a href="javascript:void(0)" target="_blank">帮助</a></li>-->
					<li class="notselect">
						<a href="#">
							<b>推荐使用谷歌浏览器</b>
						</a>
					</li>
				</ul>
			</div>
			<!-- 顶部导航条 结束 -->

			<!-- 页面表单主体 开始 -->
			<div class="container" style="top:50%;margin-top:-300px">
				<form onsubmit="return false;" data-time="0.001" data-auto="true" method="post"
					class="content layui-form animated fadeInDown" data-listen="true" novalidate="novalidate">
					<div class="people">
						<div class="tou"></div>
						<div id="left-hander" class="initial_left_hand transition"></div>
						<div id="right-hander" class="initial_right_hand transition"></div>
					</div>
					<ul>
						<li>
							<input required="required" pattern="^\S{4,}$" value="" name="username" id="username"
								autofocus="autofocus" autocomplete="off" class="login-input username validate-error"
								placeholder="请输入用户名/手机号码" onclick="see('yes')">
							<span class="prompting">请输入4位及以上字符</span>
						</li>
						<li>
							<input required="required" pattern="^\S{4,}$" value="" id="password" name="password"
								type="password" autocomplete="off" class="login-input password" placeholder="请输入密码"
								onfocus="see('no')">
						</li>
						<li>
							<input pattern="^\S{4,}$" value="" name="veryCode" id="veryCode" type="text"
								autocomplete="off" class="login-input captcha" title="请输入验证码" placeholder="请输入验证码"
								onfocus="see('yes')" style="width: 50%;">
							<img src="/DrawImage" title="点击更换" alt="captcha"
								class="captcha_img" id="imgObj" onclick="changemyImg()" style="z-index:9999">
							<div style="clear:both"></div>
						</li>
						<li class="text-center">
							<button class="layui-btn" onclick="isRightCode()">立 即 登 入</button>
							<!--<a style="position:absolute;display:block;right:0" href="javascript:void(0)">忘记密码？</a>-->
						</li>
					</ul>
				</form>
			</div>
			<!-- 页面表单主体 结束 -->

			<!-- 底部版权信息 开始 -->
			<div class="footer notselect">浓雾监测系统 © 2021.04.17</div>
			<!-- 底部版本信息 结束 -->

		</div>

		<script type="text/javascript">
			// 验证码验证
			function isRightCode() {
				//var code = $("#veryCode").attr("value");
				var code = $("#veryCode").val();
				var username = $("#username").val();
				var password = $("#password").val();
				// alert(code);
				code = "c=" + code + "&username=" + username + "&password=" + password;
				$.ajax({
					type: "POST",
					url: "/login",
					data: code,
					dataType: "json",
					success: function(result) {
						if (result.code == "1") {
							location.href = "/admin/fog.html";
						} else if (result.code == "2") {
							layer.msg('用户名或密码错误!', {
								time: 1500
							});
						} else if (result.code == "3") {
							layer.msg('验证码错误!', {
								time: 1500
							});
						} else {
							layer.msg('请输入验证码!', {
								time: 1500
							});
						}
					},
					error: function() {
						//alert("請求失敗");
					}
				});
			}
		</script>

	</body>
</html>
